<!-- @format -->

<template>
  <div class="katex-container">
    <h1>KaTeX 数学公式渲染</h1>
    <RichTextWithKatex :content="mathContent" />
  </div>
</template>

<script>
import RichTextWithKatex from './RichTextWithKatex.vue'

export default {
  components: {
    RichTextWithKatex
  },
  data() {
    return {
      mathContent: `
        <h2>数学公式测试</h2>
        <p>内联公式: $x^2 + y^2 = z^2$ 和 $E = mc^2$</p>
        <p>上标测试: $a^2$, $x^n$, $e^{i\\pi}$</p>
        <p>下标测试: $a_1$, $x_n$, $a_{ij}$</p>
        <p>混合上下标: $a_i^j$, $x_{i+1}^{n-1}$</p>
        <p>块级公式:</p>
        $$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$$
        $$\\int_{a}^{b} f(x) \\, dx = F(b) - F(a)$$
      `
    }
  }
}
</script>

<style scoped>
.katex-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>
